/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import pxToDp from '../config/pxToDp'
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';


export default class UserInfoScene extends Component {
    // TODO 
    render() {
        const userName = this.props.navigation.getParam('userName')
        const userPic = this.props.navigation.getParam('userPic')
        const userPhone = this.props.navigation.getParam('userPhone')
        return (
            <View style={styles.all_view}>
                <View style={styles.big_view}>
                    <View style={styles.small_view_touxiang}>
                        <View style={styles.contentChild}>
                            <Text style={styles.text}>头像</Text>
                            <Image style={styles.img_touxiang} source={{uri:userPic}}/>
                        </View>
                    </View>

                    <View style={styles.small_view_touxiang}>
                        <View style={styles.contentChild2}>
                            <Text style={styles.text}>昵称</Text>
                            <Text style={styles.text2}>{userName}</Text>
                        </View>
                    </View>

                    <View style={styles.small_view_touxiang}>
                        <View style={styles.contentChild2}>
                            <Text style={styles.text}>随聊号</Text>
                            <Text style={styles.text2}>{uid}</Text>
                        </View>
                    </View>
                    <View style={styles.small_view_touxiang}>
                        <View style={styles.contentChild2}>
                            <Text style={styles.text}>手机号</Text>
                            <Text style={styles.text2}>{userPhone}</Text>
                        </View>
                    </View>


                    <TouchableOpacity style={styles.small_view_touxiang} onPress={()=>{
                        this.props.navigation.navigate('myQRcode')
                    }}>
                        <View style={styles.contentChild2}>
                            <Text style={styles.text}>二维码名片</Text>
                            <FontAwesome style={styles.img_erweima} name="qrcode" size={22}></FontAwesome>
                        </View>
                    </TouchableOpacity>

                    <View style={styles.small_view_touxiang}>
                        <View style={styles.contentChild2}>
                            <Text style={styles.text}>性别</Text>
                            <Text style={styles.text2}>女</Text>
                        </View>
                    </View>

                    <View style={styles.small_view_touxiang}>
                        <View style={styles.contentChild2}>
                            <Text style={styles.text}>地区</Text>
                            <Text style={styles.text2}>河南——新乡</Text>
                        </View>
                    </View>

                    <View style={styles.small_view_touxiang}>
                        <View style={styles.contentChild3}>
                            <Text style={styles.text}>个性签名</Text>
                            <Text style={styles.text2}>你想一夜暴富吗？ 你想资产过亿吗？</Text>
                        </View>
                    </View>

                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({


    //头像
    contentChild:{
        justifyContent:"space-between",
        flexDirection:'row',//view内的内容横着排列
        height:pxToDp(100),
        borderBottomWidth:1,
        borderColor:'#dfdfdf',
    },

     //其他的信息
    contentChild2:{
        justifyContent:"space-between",
        flexDirection:'row',//view内的内容横着排列
        height:pxToDp(80),
        borderBottomWidth:1,
        borderColor:'#dfdfdf',
    },

    contentChild3:{
        justifyContent:"space-between",
        flexDirection:'row',//view内的内容横着排列
        height:pxToDp(80),

    },

    //头像的view
     small_view_touxiang:{
         paddingRight: pxToDp(20),
         paddingLeft: pxToDp(20),
     },
    //其他信息的view
    small_view_other:{
        paddingRight: pxToDp(20),
        paddingLeft: pxToDp(20),

    },

    //总的viwe
     all_view:{
         flex:1,
         backgroundColor:'#ebebeb',
       },

    //总view里面的大view
    big_view:{
        marginTop:pxToDp(20),
        backgroundColor:'#ffffff',
    },

    //字体
    text: {

        alignSelf:'center',
        // fontSize: 12,
        color:'#343434',
    },

    text2:{

        alignSelf:'center',
        fontSize: pxToDp(22),
        color:'#888785',
    },

    //头像图片
    img_touxiang:{
        height:pxToDp(60),
        width:pxToDp(60),
        alignSelf:'center'
    },

    img_erweima:{
        height:pxToDp(40),
        width:pxToDp(40),
        alignSelf:'center'
    },

});

